<template>
    <div>
      <div class="hot-navbar">
        <van-nav-bar title="编辑推荐">
          <template #left>
              <van-icon name="arrow-left"  size="20" color="#323233" @click="back"/>
          </template>
        </van-nav-bar>
      </div>
      <div class="content">
              <div class="content-item">
                <div class="content-item-list">
                  <div
                    class="content-item-list-item"
                    v-for="(item, i) in data"
                    :key="i" @click=toVideo(item.id)
                  >
                    <div class="content-item-list-item-img">
                      <img v-lazy="item.cover" alt="" />
                    </div>
                    <div class="content-item-list-item-info">
                      <div class="content-item-list-item-info-title">
                        {{ item.title }}
                      </div>
                      <div class="paly">
                        <span>{{ item.count.count_view }}次</span>
                        <span>{{ item.count.count_like }}喜欢</span>
                      </div>
                      <div class="content-item-list-item-info-author">
                        <div class="content-item-list-item-info-author-img">
                          <img v-lazy="item.author.userinfo.avatar" alt="" />
                        </div>
                        <div class="content-item-list-item-info-author-name">
                          {{ item.author.userinfo.username }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    </div>
  </template>
  <script>
  import axios from "axios";
  import VueAxios from "vue-axios";
  export default {
    data() {
      return {
        value: "",
        data: [],
        total: 0,
        active: "",
        value1: "hot",
        value2: "a",
        searchList: [],
        option1: [
          { text: "最热门", value: "hot" },
          { text: "最匹配", value: "default" },
          { text: "新发布", value: "addtime" },
        ],
        option2: [
          { text: "最热门", value: "a" },
          { text: "最匹配", value: "b" },
          { text: "新发布", value: "c" },
        ],
  
      };
    },
    methods: {
      onCancel() {
        this.$router.push("/Search");
      },
      GetSearchResult(kw, sort) {
        axios({
          method: "get",
          url: "https://apis.netstart.cn/xpc/home/cateSelection",
          params: {
            kw,
            sort,
          },
        }).then((res) => {
          this.total = res.data.data.total;
          this.data = res.data.data.list;
        });
      },
      onSearch(kw) {
        this.value = kw;
        this.GetSearchResult(this.value);
        const value = this.value.trim();
        if (!value) {
          //判断输入框的值是否为空  如果为空 直接返回不在执行
          return;
        }
        if (this.searchList.indexOf(value) === -1) {
          this.searchList.unshift(value);
          //历史记录最多只取十个
          this.searchList = this.searchList.slice(0, 10);
          localStorage.setItem("keyword", JSON.stringify(this.searchList));
        }
      
      },
      toVideo(id){
        this.$router.push({path:'/Video',query:{id}})
      },
      back(){
          this.$router.go(-1)
      }
    },
    watch: {
      value1() {
        this.GetSearchResult(this.value||this.kw,this.value1);
      },
    
    },
    mounted() {
      this.GetSearchResult(this.$route.query.kw);
      this.searchList = JSON.parse(localStorage.getItem("keyword")) || []; 
    },
  };
  </script>
  
  <style lang="scss">
      .content {
      padding-bottom: 60px;
    .paly {
      color: #9c9799;
      margin-top: 10px;
      span {
        margin-right: 2vw;
      }
    }
    .content-item {
      .content-item-title {
        font-size: 30px;
        padding: 0 4vw;
        font-weight: bold;
        height: 10.7vw;
        line-height: 10.7vw;
        border-bottom: 1px solid #e5e5e5;
      }
      .content-item-list {
        .content-item-list-item {
          display: flex;
          padding: 4vw;
          border-bottom: 1px solid #e5e5e5;
          .content-item-list-item-img {
            width: 39.8551vw;
            height: 24.1546vw;
            border-radius: 20px;
            overflow: hidden;
            img {
              width: 39.8551vw;
              height: 24.1546vw;
            }
          }
          .content-item-list-item-info {
            flex: 1;
            padding-left: 4vw;
            .content-item-list-item-info-title {
              font-size: 25px;
              font-weight: bold;
              height: 8.7vw;
              line-height: 4.7vw;
              margin-top: 10px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              /*从上到下垂直排列子元素*/
              -webkit-line-clamp: 2;
              /*行数，超出三行隐藏且多余的用省略号表示...*/
              line-clamp: 5;
              overflow: hidden;
            }
            .content-item-list-item-info-author {
              display: flex;
              align-items: center;
              margin-top: 20px;
              .content-item-list-item-info-author-img {
                width: 6vw;
                height: 6vw;
  
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              .content-item-list-item-info-author-name {
                font-size: 18px;
                padding-left: 2vw;
              }
            }
          }
        }
      }
    }
  }
  .hot-navbar{
    .van-nav-bar {
      height: 12.2657vw;
     border-bottom: 1px solid #ccc;
    }
    .van-nav-bar__content{
      height: 10.7vw;
  
      .van-nav-bar__title{
          font-size:25px;
          line-height: 10.7vw;
          
      }
    }
  }
  
  </style>